@charset "utf-8";
  #menu ul{
            /* cho margin va padding về 0 */
            margin: 0; 
            padding: 0;
        }
        
        /* vì <li> là con của <ul> là con của #menu nên ta phải gọi theo thứ tự là #menu ul li */
          /* Nếu em ghi như bên dưới thì toàn bộ nơi nào có thẻ ul và li thì nó sẻ định dạng như menu hết luôn, nhưng ở đây mình chỉ muốn định dạng riêng cho phần menu thôi */
          
        #menu ul li{
            text-align: center; /* cho chữ nằm giữa */
            /* Đường viên bên trái và bên phải menu */
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            height: 30px;
            list-style: none; /* bỏ dấu chấm, em xóa cái này thử xem nó sẻ có dấu chấm :) */
            width: 100px; /* chiều rộng mỗi menu (li) */
            float: left; /* mặt định nó sẻ không nằm 1 hàng, để cho nó nằm 1 hàng e làm như thế  *//* cho các <li> thứ 2,3,...n nằm về bên trái ( menu 2 nằm bên trái menu 1, menu 3 nằm bên trái menu 2,....) */
            
            position: relative; /* em tham khảo http://hocwebchuan.com/reference/cssSection/pr_position.php */
            /* hiểu nôm na nó là phần mẹ, để cho phần con là các ul,li sau nó dựa vào :) */
        }
        
        #menu ul li ul {
            position: absolute; /* nó định vị dựa vào thuộc tính position: relative; bên trên (#menu ul li{ }) */
            display: none; /* ẩn các menu con đi */
            z-index: 99999; /* xem thêm: http://hocwebchuan.com/reference/cssSection/pr_z-index.php */
            background: #A4CF9C; /* màu nên của các menu con */
        }

        /* sau khi em cho thuộc tính display: none; ở trên để ẩn menu con đi, thì giờ em cho nó hiện ra lại khi rê chuột vào */
        #menu ul li:hover ul{
             display: block;
        }

        #menu ul li a {
            text-decoration: none; /* Bỏ dấu gạch dưới của mỗi link trên menu*/
            line-height: 30px; /* cho cái chũ nó nằm giữa phần trên và dưới => khoản cách giữa mỗi dòng, giống dòng cách dòng trong word */
        }
        
        /* e muốn khi rê chuột vào menu nó đổi màu thì thêm thuộc tính :hover trong css sau */
        /* khi e rê chuột qua thẻ li thì nó sẻ đôi màu ( em cũng có thẻ cho a:hover, ul:hover ) */
        #menu ul li:hover {
            
            background: #ECE084;
        }
/* CSS Document */

